<template>
  <div>
    <div class="header">
      <tr>
        <td>
          <SingleCheck :value="canuseConf" @sigleCheckedId="sigleChecked"></SingleCheck>
        </td>
      </tr>
      <tr>
        <td>
          <ManyCheck :value="canuseConf_weeks" @trueValIds="trueValIds"></ManyCheck>
          <StudentTimeConf @studentTimeChange="studentTimeChange($event, 0)"></StudentTimeConf>
          <StudentTimeConf @studentTimeChange="studentTimeChange($event, 1)"></StudentTimeConf>
        </td>
      </tr>
    </div>
    <div>
      <input type="button" value="添加" @click="addConf">
    </div>
    <div>
      <ManyCheck :value="canuseConf_showType" @trueValIds="showType"></ManyCheck>
    </div>
    <div class="header">
      <table id="table1" class="table-goods">
        <colgroup>
          <col name="星期" width="15%">
          <col name="类型" width="15%">
          <col name="说明" width="55%">
          <col name="操作" width="15%">
        </colgroup>
        <thead>
          <tr>
            <th>星期</th>
            <th>类型</th>
            <th>课时</th>
            <th>操作</th>
          </tr>
        </thead>
        <tr v-for="(item, index) in canuseDataByType" :key="index" :id="'tr' + index">
          <!-- <td>{{item.week}}</td>
          <td>{{item.type}}</td> -->
          <td>{{weekTrans(item.week)}}</td>
          <td>{{useTypeTrans(item.type)}}</td>
          <td>{{item.time[0]}}-{{item.time[1]}}</td>
          <td><input type="button" value="删除" @click="del1234(index)"></td>
        </tr>
        <!-- <tr class="mytr">
          <td class="mytd">11</td>
          <td class="mytd">11</td>
          <td class="mytd">11</td>
          <td class="mytd"><input type="button" value="删除" @click="del"></td>
        </tr>
        <tr class="mytr">
          <td class="mytd">11</td>
          <td class="mytd">11</td>
          <td class="mytd">11</td>
          <td class="mytd"><input type="button" value="删除" @click="del"></td>
        </tr> -->
      </table>
    </div>
    <input type="button" value="确定" @click="add">
    <input type="button" value="取消" @click="cancle">
  </div>
</template>

<script>
import scheduleData from '@/data/schudle'
import StudentTimeConf from '@/components/tools/studentTime'
import SingleCheck from '@/components/tools/singleCheck'
import ManyCheck from '@/components/tools/manyCheck'
import Ppp from '@/data/ppp.js'

// import Calendar from '@/components/tools/vue-calendar-component'
// import Ppp from '@/data/ppp.js'
export default {
  name: 'AddStudentTime',
  components: { StudentTimeConf, SingleCheck, ManyCheck },
  created () {
    window.del1234 = this.del1234
  },
  beforeMount () {
    console.log('mounted==yearList=============================')
    this.canuseConf = scheduleData.canuseConf
    this.canuseConf_weeks = scheduleData.canuseConf_weeks
    this.canuseConf_showType = scheduleData.canuseConf_showType
    this.initData()
  },
  computed: {
    canuseDataByType () {
      // return []
      if (this.canuseShowType === '3') {
        return this.canuseData
      } else {
        var ss = []
        for (var item of this.canuseData) {
          if (item.type === this.canuseShowType) {
            ss.push(item)
          }
        }
        return ss
      }
    }
  },
  mounted () {
    console.log('mounted==Main==canuseData===========================', this.canuseData)
  },
  watch: {
    // 'u_birthday.value': function (val, oldval) {
    //   console.log('00000000000000000=' + val + ',' + oldval)
    // }
  },
  methods: {
    initData () {
      let ss = window.sessionStorage.getItem('u_currentData')
      console.log('initData=', ss)
      if (ss) {
        ss = JSON.parse(ss)
        this.canuseData = ss.u_learnTime
      }
    },
    useTypeTrans (id) {
      console.log('useTypeTrans=', id)
      switch (id) {
        case '1': return '可用'
        case '2': return '不可用'
        default: return '11'
      }
    },
    weekTrans (id) {
      console.log('weekTrans=', id)
      switch (id) {
        case '1': return '星期一'
        case '2': return '星期二'
        case '3': return '星期三'
        case '4': return '星期四'
        case '5': return '星期五'
        case '6': return '星期六'
        case '7': return '星期日'
      }
    },
    showType (itemSelecteds) {
      console.log('itemSelecteds=', itemSelecteds)
      if (itemSelecteds.length === 2) {
        this.canuseShowType = '3'
      } else if (itemSelecteds.length === 1) {
        this.canuseShowType = itemSelecteds[0]
      } else {
        this.canuseShowType = '4'
        console.log('else ---------- this.canuseShowType = 0')
      }
    },
    addConf () {
      // <!-- week: '1',
      //     type: '1',
      //     time: ['2', '2'] -->
      console.log('addConf====', this.sel.confTime)
      // var addList = []

      for (var timeSeg of this.sel.confTime) {
        if (timeSeg.start !== '') {
          console.log('timeSeg=', timeSeg)
          for (var week of this.sel.Weeks) {
            console.log('week=', week)
            var addInfo = {}
            addInfo.week = week
            addInfo.type = this.sel.useType
            addInfo.time = [timeSeg.start, timeSeg.end]
            console.log('addInfo=', addInfo)
            this.canuseData.push(addInfo)
          }
        }
      }
      // var ss = {}
      // ss.week = 2
      // ss.type = 2
      // ss.time = [2, 2]

      // 动态增加dom的方法，有事件无法自动加载的问题需要解决
      // todo：
      // let myTable = document.getElementById('table1')

      // let newTR = myTable.insertRow(myTable.rows.length)
      // newTR.className = 'mytr'

      // newTR.id = 'newTRId' + myTable.rows.length
      // var newTDWeek = newTR.insertCell(0)
      // newTDWeek.className = 'mytd'
      // newTDWeek.innerHTML = newTR.rowIndex.toString()

      // var newTDType = newTR.insertCell(1)
      // newTDType.className = 'mytd'
      // newTDType.innerHTML = newTR.rowIndex.toString()

      // var newTDTime = newTR.insertCell(2)
      // newTDTime.className = 'mytd'
      // newTDTime.innerHTML = newTR.rowIndex.toString()

      // var newTDOpt = newTR.insertCell(3)
      // newTDOpt.className = 'mytd'

      // newTDOpt.innerHTML = '<input type="button" value="删除" @click="del1234">'
    },
    del1234 (index) {
      console.log('====del==========' + index)
      // var id = 'tr' + index
      // var el = document.getElementById(id)
      // el.parentNode.removeChild(el)
      this.canuseData.splice(index, 1)
    },
    // 星期选择了哪些
    trueValIds (ids) {
      console.log('AddStudentTime===trueValIds-ids=', ids)
      this.sel.Weeks = ids
    },
    // 可用，不可用单选
    sigleChecked (id) {
      console.log('before:==this.sel.useType', this.sel.useType)
      console.log('AddStudentTime===sigleChecked-index=', id)
      this.sel.useType = id
    },
    // 选择的时段发生变化
    studentTimeChange (timeSeg, index) {
      console.log('timeSeg=', timeSeg, 'index=', index)
      if (timeSeg !== '') {
        var beginEndSeg = timeSeg.split('-')
        console.log('beginEndSeg', beginEndSeg)

        this.sel.confTime[index].start = beginEndSeg[0]
        this.sel.confTime[index].end = beginEndSeg[1]
      } else {
        this.sel.confTime[index].start = ''
        this.sel.confTime[index].end = ''
      }
      console.log('this.sel=', this.sel)
    },
    add () {
      Ppp.$emit('u_addStudentTimeSeg', this.canuseData)
      this.$router.go(-1)
    },
    cancle () {
      this.$router.go(-1)
    }
  },
  data () {
    return {
      canuseConf: {},
      canuseConf_showType: {},
      canuseConf_weeks: {},
      // 默认筛选条件：3:全选 ,0：可用；1：不可用
      canuseShowType: '3',
      sel: {
        // 第一组时间段和第二组时间段，哪个不为空取哪个，在添加时段时控制,[0][0]为起始时分，[0][1]为截止时分
        confTime: [
          {
            start: '',
            end: ''
          },
          {
            start: '',
            end: ''
          }
        ],
        // 1:可用，2：不可用
        useType: '1',
        // 星期一为1，星期日为7
        Weeks: []
      },
      canuseData: [
        // {
        //   week: '1',
        //   type: '1',
        //   time: ['2', '2']
        // },
        // {
        //   week: '2',
        //   type: '2',
        //   time: ['3', '3']
        // }
      ]
      // l_year: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 201],
      // l_month: [1, 2, 3, 4,5,6,7,8,9,10,11,12],
      // l_day: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
/* <style scoped> */
.head{
  width: 100%;
}
.table-goods {
    width: 100%;
    top: 0px;
    margin-top: 15px;
    color: rgb(15, 15, 15);
    table-layout: fixed;
    /* border-collapse: collapse; */
    user-select: none;
    border: 2px solid rgba(95, 95, 121, 0.116);
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(214, 119, 11, 0.1);
  }
  .table-goods td {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    border: 2px solid rgba(192, 202, 189, 0.26);
  }
  .table-goods th {
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(141, 103, 191, 0.1);
  }
  .mytr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .mytd {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    border: 2px solid rgba(192, 202, 189, 0.26);
  }
  .time1 {
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
  }
  .opt {
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
  }
</style>
